<template>
  <el-dialog
    class="dialogModel"
    title="项目管理新增"
    :visible.sync="dialogProjectVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-card class="box-card el-card-flex dialogCard">
      <div slot="header" class="clearfix">
        <el-input placeholder="请搜索..." suffix-icon="el-icon-search" style="width: 210px; float: right"></el-input>
      </div>
      <div class="text item checkbox">
        <el-checkbox-group v-model="checkedProject">
          <el-checkbox border v-for="name in checkedProjects" :label="name" :key="name">{{name}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCheck(true)">
        确定
        <i class="el-icon-document-checked el-icon--right"></i>
      </el-button>
      <el-button @click="handleCheck(false)">
        取消
        <i class="el-icon-refresh-left"></i>
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Dialog, Table, TableColumn, MessageBox, Message, TabPane, Collapse, CollapseItem, Tag } from 'element-ui'
const projectOptions = ['秦皇岛应用', '三重一大应用', '会展应用', '出海应用']
export default {
  props: ['dialogProjectVisible'],
  data () {
    return {
      checkedProject: [],
      checkedProjects: projectOptions
    }
  },
  methods: {
    // 弹框关闭提示框
    handleClose () {
      MessageBox.confirm('确认要关闭弹框吗？')
        .then(() => {
          this.checkedProject = []
          this.$emit('dialogHideProject', false)
        })
        .catch(() => {})
    },
    // 弹框点击按钮
    handleCheck (result) {
      if (!result) {
        return this.handleClose()
      } else {
        this.$emit('getCheckoutProjectData', this.checkedProject)
        this.checkedProject = []
        return this.$emit('dialogHideProject', false)
      }
    }
  },
  components: {
    'el-dialog': Dialog, // 对话框
    'el-table': Table, // 表格
		'el-table-column': TableColumn, // 表格列
		'el-tab-pane': TabPane, // 标签页
		'el-collapse': Collapse, // 折叠面板
		'el-collapse-item': CollapseItem, // 折叠面板列
		'el-tag': Tag // 标签
  },
}
</script>
<style lang="scss">
.dialogModel{
  .el-dialog{
    .el-dialog__body{
      padding: 0px 20px 60px;
    }
  }
}
.dialogCard{
  border: none;
  box-shadow: none;
  .el-card__header{
    border-bottom: none;
  }
  .el-card__body{
    .text.item{
      padding: 0;
    }
  }
  .checkbox{
    .el-checkbox {
      margin: 6px 0 6px 10px;
    }
  }
}
.dialogCard.is-always-shadow{
  -webkit-box-shadow: none; 
  box-shadow: none;
}
</style>